<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="game" width="500px" height="400px"></canvas>
		<script>
			const canvas=document.getElementById("game");
			canvas.width=window.innerWidth; //Make the Canvas full screen
			canvas.height=window.innerHeight;
			const ctx=canvas.getContext("2d");
			let trees=[];
			let platforms=[];
			init();
			//游戏初始化
			function init(){
				trees=[];
				generateTree();
				generateTree();
				generateTree();
				generateTree();
				generateTree();
				generateTree();
				generateTree();
				platforms=[{
					x:50,
					w:50
				}];
				generatePlatform();
				generatePlatform();
				generatePlatform();
				generatePlatform();
				draw();
			}
			function draw(){
				//绘制背景 1.绘制天空 2.绘制树
				drawBackGround();
				//绘制跳台
				drawPlatForm();
				//绘制小人
				drawPlayer();
			}
			function drawBackGround(){
				drawSky();
				trees.forEach((tree) => drawTrees(tree.x, tree.color));
			}
			function drawSky(){
				var gradient = ctx.createLinearGradient(0,0,0, window.innerHeight);
				gradient.addColorStop(0,"#BBD691");
				gradient.addColorStop(1,"#FEF1E1");
				ctx.fillStyle=gradient;
				ctx.fillRect(0,0, window.innerWidth, window.innerHeight);
			}
			function drawTrees(x,color){
				ctx.save();
				ctx.translate(x,window.innerHeight-50);
				//画树干
				ctx.fillStyle="#7d833c";
				ctx.fillRect(-2,-25,4,10);
				//画树冠
				ctx.beginPath();
				    ctx.moveTo(-10, -25);
					ctx.lineTo(0, -60);
					ctx.lineTo(10, -25);
					ctx.fillStyle = color;
					ctx.fill();
					ctx.restore();
			}
			//画柱子
			function drawPlatForm(){
				platforms.forEach(({
					x,
					w
				}) => {
					ctx.fillStyle= "black";
					ctx.fillRect(x, window.innerHeight-200,w, 200);
				});
			}
			function drawPlayer(){}
			function generateTree(){
				// 给出两棵树之间的最小和最大间距
				const minimumGap = 30;
				const maximumGap = 150;
				// 读取当前数组中最后一棵树的x值并赋值给furthestX作为下一颗树的基准x值，如果数组为空，则将该值设置为0
				const lastTree=trees[trees.length-1];
				let furthestX=lastTree ? lastTree.x : 0;
				// 生成一个30到150之间的随机整数
				let dist=30+Math.floor(Math.random()*120);
				// const x = furthestX + minimumGap + Math.floor(Math.random() * (maximumGap - minimumGap));
				// const x = furthestX + (30 + Math.floor(Math.random() * (150 - 30)));
				//让下一棵树的横坐标在原来最后一棵树的基础上再向右移动30到150之间的随机值
				const x=furthestX+dist;
				//将需要使用到的绘制树冠的不同颜色存入数组
				const treeColors=["#6d8821","#8fac34","#98b333"];
				//在数组中随机选取一个颜色作为新树的颜色
				const color=treeColors[Math.floor(Math.random()*3)];
				trees.push({
					x,
					color
				});
			}
			function generatePlatform(){
				//平台之间间距为40-200
				const minimumGap=40;
				const maximumGap=200;
				//柱子宽度为20-100
				const minimumWidth=20;
				const maximumWidth=100;
				const lastPlatform=platforms[platforms.length-1];
				let furthestX=lastPlatform.x + lastPlatform.w;
				const x=furthestX+minimumGap+Math.floor(Math.random()* (maximumGap-minimumGap));
				const w=minimumWidth+Math.floor(Math.random()*(maximumWidth-minimumWidth));
				platforms.push({
					x,
					w
				});
			}
		</script>
	</body>
</html>